<template>
  <div class="dragrank">
    <draggable
      v-model="tabArray"
      handle=".dragrank-item"
      class="dragrank-content"
      chosenClass="chosen"
      forceFallback="true"
      group="people"
      @start="onStart"
      animation="1000"
      @end="onEnd"
    >
      <transition-group>
        <label class="dragrank-item" v-for="(element, index) in tabArray" :key="'kd' + index">
          <input class="dragrank-item-radio" type="radio" :disabled="!edit" :value="index" v-model="select" />
          <div class="dragrank-item-title">
            <span>{{ element[titleKey] }}</span>
            <i class="le-icon le-icon-trash dragrank-item-del" @click.stop="handleDelete(index)"></i>
          </div>
        </label>
      </transition-group>
    </draggable>
  </div>
</template>

<script type="text/javascript">
import draggable from 'vuedraggable';
export default {
  //注册draggable组件
  components: {
    draggable
  },
  props: {
    value: {
      type: [Array, Object],
      default: ''
    },
    edit: {
      type: Boolean,
      default: function () {
        return true;
      }
    },
    titleKey: {
      type: String,
      default: function () {
        return 'title';
      }
    }
  },
  data() {
    return {
      select: !this.edit ? -1 : 0
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    tabArray: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      }
    }
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    select(value) {
      this.$emit('change', value);
    }
  },
  methods: {
    handleDelete(index) {
      //判断删除的是否为当前值
      if (index === this.select) {
        this.select = 0;
      }
      //执行数据删除
      this.tabArray.splice(index, 1);
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    }
  }
};
</script>

<style lang="less" scoped>
@import './dragrank.less';
</style>
